<template>
	<view class="bg">
		<xl-navbar title="Empty内容为空" fixed shadow></xl-navbar>
		<view class="title">基础样式</view>
		<xl-tabs :tabList="types" switchType="swiper" :fixedHeight="500">
			<template v-slot:tabBox="{item}">
				<xl-empty :type="item.type"></xl-empty>
			</template>
		</xl-tabs>
		<view class="title">设置提示内容、字体大小、颜色</view>
		<xl-empty text="自定义提示" fontSize="32" color="#0a93ff"></xl-empty>
		<view class="title">设置上下边距</view>
		<xl-empty top="10" bottom="10"></xl-empty>
		<view class="title">自定义图片</view>
		<xl-empty image="/uni_modules/xingluo-ui/static/imgs/empty.png" imageWidth="400rpx" imageHeight="250rpx"></xl-empty>
	</view>
</template>

<script setup>
	import { ref, onMounted, computed } from "vue";
	const types = [
	    {name: '默认', type: 'data'},
	    {name: '地址', type: 'address'},
	    {name: '购物车', type: 'car'},
	    {name: '评论', type: 'comment'},
	    {name: '优惠券', type: 'coupon'},
	    {name: '设备', type: 'equipment'},
	    {name: '出错了', type: 'error'},
	    {name: '商品', type: 'goods'},
	    {name: '历史记录', type: 'history'},
	    {name: '列表', type: 'list'},
	    {name: '加载中', type: 'loading'},
	    {name: '维护中', type: 'maintain'},
	    {name: '余额', type: 'money'},
	    {name: '网络', type: 'network'},
	    {name: '新闻', type: 'news'},
	    {name: '通知', type: 'notice'},
	    {name: '订单', type: 'order'},
	    {name: '权限', type: 'permission'},
	    {name: '积分', type: 'points'},
	    {name: '搜索结果', type: 'search'},
	    {name: '任务', type: 'task'},
	    {name: '404', type: '404'},
	    {name: '500', type: '500'}
	];
</script>

